<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.device_no" placeholder="设备编号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="filters.start_date" type="date" placeholder="选择开始日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="filters.end_date" type="date" placeholder="选择结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="filters.marked" placeholder="请选择">
                        <el-option v-for="item in markedEmu" :key="item.key" :label="item.value" :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getDangerData">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="dangerData" border highlight-current-row v-loading="listLoading" style="width: 100%;">
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="device_no" label="设备编号" width="160">
            </el-table-column>
            <el-table-column prop="value1" label="pm2.5上限超标值" width="190">
            </el-table-column>
            <el-table-column prop="value3" label="pm10上限超标值" width="190">
            </el-table-column>
            <el-table-column prop="value5" label="pm100上限超标值" width="190">
            </el-table-column>
            <el-table-column label="操作" min-width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                    <el-button size="small" @click="handlemarked(scope.$index, scope.row)">忽略</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="30" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑界面-->
        <el-dialog title="详情" v-model="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="90px" ref="editForm">
                <el-form-item label="设备编号" prop="device_no">
                    <el-input v-model="editForm.device_no" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="pm2.5上限">
                    <el-input v-model="editForm.critical_value1" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="超标值">
                    <el-input v-model="editForm.value1" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="pm2.5下限">
                    <el-input v-model="editForm.critical_value2" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="超标值">
                    <el-input v-model="editForm.value2" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="pm10上限">
                    <el-input v-model="editForm.critical_value3" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="超标值">
                    <el-input v-model="editForm.value3" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="pm10下限">
                    <el-input v-model="editForm.critical_value4" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="超标值">
                    <el-input v-model="editForm.value4" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="pm100上限">
                    <el-input v-model="editForm.critical_value5" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="超标值">
                    <el-input v-model="editForm.value5" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="pm100下限">
                    <el-input v-model="editForm.critical_value6" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="超标值">
                    <el-input v-model="editForm.value6" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item style="width:240px" label="上传时间">
                    <el-input v-model="editForm.upload_at" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click.native="editFormVisible = false">确定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    data() {
        return {
            filters: {
                device_no: '',
                start_date: '',
                end_date: '',
                marked: '0',
            },
            dangerData: [],
            total: 0,
            page: 1,
            listLoading: false,
            isUserTable: true,

            //编辑界面
            editFormVisible: false,
            editLoading: false,
            editForm: {
                id: null,
                device_no: '',
                critical_value1: null,
                value1: null,
                critical_value2: null,
                value2: null,
                critical_value3: null,
                value3: null,
                critical_value4: null,
                value4: null,
                critical_value5: null,
                value5: null,
                critical_value6: null,
                value6: null,
                upload_at: null,
                marked: null
            },
            markedEmu: [
                {
                    key: '0',
                    value: '未查看'
                }, {
                    key: '1',
                    value: '全部'
                }
            ]
        }
    },
    methods: {
        handleCurrentChange: function(val) {
            this.page = val
            if (this.isUserTable) {
                this.getUserDangerData()
            } else {
                this.getDangerData()
            }
        },
        //获取数据列表
        getDangerData: function() {
            if (this.filters.device_no && this.filters.start_date && this.filters.end_date && this.filters.marked) {
                this.isUserTable = false
                this.listLoading = true

                let start_date = this.GMT2Date(this.filters.start_date)
                let end_date = this.GMT2Date(this.filters.end_date)
                let token = sessionStorage.getItem('token')
                let params = this.formatHttpGetParams({ page: this.page, size: 30, token: token })
                let path = 'api/monitor/download_danger/' + String.trim(this.filters.device_no) + '/' + start_date + '/' + end_date + '/' + this.filters.marked
                this.$http.get(this.$store.state.domain + path + params).then(function(res) {
                    if (res.body.respCode == '0000') {
                        this.total = res.body.count
                        this.dangerData = res.body.data
                    } else {
                        if (res.body.respMsg != null) {
                            alert(res.body.respMsg)
                        } else {
                            alert('后台未知异常，请与管理员联系')
                        }
                    }
                    this.listLoading = false
                }, function() {
                    alert('网络请求处理失败')
                    this.listLoading = false
                })
            } else {
                this.getUserDangerData()
            }
        },
        getUserDangerData: function() {
            let curDate = new Date()
            if (!this.filters.start_date) {
                this.filters.start_date = new Date(curDate.getTime() - 7 * 24 * 60 * 60 * 1000)
            }
            if (!this.filters.end_date) {
                this.filters.end_date = new Date(curDate.getTime() + 24 * 60 * 60 * 1000)
            }

            if (!this.filters.device_no && this.filters.start_date && this.filters.end_date && this.filters.marked) {
                this.isUserTable = true
                this.listLoading = true

                let start_date = this.GMT2Date(this.filters.start_date)
                let end_date = this.GMT2Date(this.filters.end_date)
                let token = sessionStorage.getItem('token')
                let params = this.formatHttpGetParams({ page: this.page, size: 30, token: token })
                let path = 'api/monitor/download_user_danger/' + start_date + '/' + end_date
                this.$http.get(this.$store.state.domain + path + params).then(function(res) {
                    if (res.body.respCode == '0000') {
                        this.total = res.body.count
                        this.dangerData = res.body.data
                    } else {
                        if (res.body.respMsg != null) {
                            alert(res.body.respMsg)
                        } else {
                            alert('后台未知异常，请与管理员联系')
                        }
                    }
                    this.listLoading = false
                }, function() {
                    alert('网络请求处理失败')
                    this.listLoading = false
                })
            }
        },
        //显示编辑界面
        handleEdit: function(index, row) {
            this.editFormVisible = true
            this.editForm = Object.assign({}, row)
        },
        //
        handlemarked: function(index, row) {
            this.listLoading = true

            let data = new Object()
            data.id = row.id

            let token = sessionStorage.getItem('token')
            let params = this.formatHttpGetParams({ token: token })
            let path = 'api/monitor/marked'
            this.$http.post(this.$store.state.domain + path + params, JSON.stringify(data), { emulateJSON: true })
                .then(function(res) {
                    if (res.body.respCode == '0000') {
                        alert('修改成功！')
                        this.listLoading = false
                        this.getDangerData()
                    } else {
                        if (res.body.respMsg != null) {
                            alert(res.body.respMsg)
                        } else {
                            alert('后台未知异常，请与管理员联系')
                        }
                        this.listLoading = false
                    }
                },
                function(error) {
                    alert('网络请求处理失败')
                    this.listLoading = false
                })
        }
    },
    mounted() {
        this.getUserDangerData()
    }
}
</script>

<style scoped>

</style>